/**
 * Created by mapbar_front on 2019/8/1.
 */
import React,{Component} from 'react';
// import {ThemeContext,themes} from './../../utils/utils';

const themes = {
    light: {
        background: '#f99',
    },
    dark: {
        background: '#9ff',
    }
}

const ThemeContext = React.createContext(themes.light);

function Toolbar(props){
    return (
        <ThemeButton onClick={props.changeTheme}>
            ThemeButton
        </ThemeButton>
    )
}


class ThemeButton extends Component{
    constructor(props){
        super(props);
    }
    render(){
        let props = this.props;
        console.log('props',props);
        let theme = this.context;
        return(
            <button {...props} style={{background: theme.background}}>
                btn
            </button>
        )
    }
}
ThemeButton.contextType = ThemeContext;

class Context1 extends Component{
    constructor(props){
        super(props);
        this.state = {
            theme: themes.light,
        }
    }
    toggleTheme=()=>{
        console.log('toggleTheme');
        this.setState(state=>({
            theme: state.theme === themes.dark ? themes.light: themes.dark
        }))
    }
    render(){
        return(
            <div>
                <ThemeContext.Provider value={this.state.theme}>
                    <Toolbar changeTheme={this.toggleTheme}/>
                </ThemeContext.Provider>
                <div>
                    <ThemeButton/>
                </div>
            </div>
        )
    }
}
export default Context1;

